<html xmlns:th="http://www.thymeleaf.org">
<head th:include="basepage/head::head"></head>
<body>
<div id="page-wrapper" class="page-loading">
    <div class="preloader">
        <div class="inner">
            <!-- Animation spinner for all modern browsers -->
            <div class="preloader-spinner themed-background hidden-lt-ie10"></div>

            <!-- Text for IE9 -->
            <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
        </div>
    </div>
    <div id="page-container" class="header-fixed-top sidebar-visible-lg-full">
        <header th:include="basepage/left::left"></header>
        <!--主要内容 START-->
        <div id="main-container" class="main-content">
            <header th:include="basepage/header::header"></header>
            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">
                <div class="block full">
                    <div class="block-title">
                        <h2>用户列表</h2>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <form class="form-inline" role="form" onsubmit="return false;">
                                <div class="form-group">
                                    <label for="xsjb_xh">关键字</label>
                                    <input type="text" class="form-control" id="user_search" name="xh" placeholder="请输入查询关键字" th:value="${name}">
                                </div>
                                <div class="form-group">
                                    <a class="btn btn-primary btn-sm" title='搜索' id="btn_search" onclick="serachUsers()"
                                       href="javascript:void(0)"><i class="fa fa-search"></i>搜索</a>
                                    <a class="btn btn-primary btn-sm" title='添加' href="#frmEdit" data-toggle="modal"><i
                                            class="fa fa-plus"></i>添加</a>
                                    <!--<a class="collapse-link">-->
                                    <!--<i class="fa fa-chevron-up"></i>-->
                                    <!--</a>-->
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="example-datatable" class="table table-striped table-bordered table-vcenter">
                            <thead>
                            <tr>
                                <th class="text-center" style="width: 50px;">ID</th>
                                <th>用户名</th>
                                <th>创建/修改时间</th>
                                <th class="text-center" style="width: 90px;"><i class="fa fa-flash"></i></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="u,uScar:${users}">
                                <td class="text-center" th:text="${uScar.index+1}"></td>
                                <td><strong th:text="${u.username}"></strong></td>
                                <td th:text="${#dates.format(u.createdate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td class="text-center">
                                    <a href="#frmEdit" data-toggle="modal" title="编辑" 
                                       class="btn btn-effect-ripple btn-xs btn-success" th:onclick="'editUserInfo(\''+${u.username}+'\',\''+${u.password}+'\','+${u.id}+')'"><i class="fa fa-pencil"></i></a>
                                    <a href="#frmMsg" data-toggle="modal" title="删除"
                                       class="btn btn-effect-ripple btn-xs btn-danger"  th:onclick="'deleteUser('+${u.id}+')'"><i class="fa fa-times"></i></a>
                                    <!-- <a href="table_rule.html" target="_self" data-toggle="tooltip" title="权限列表"
                                       class="btn btn-effect-ripple btn-xs btn-info"><i
                                            class="fa fa-list"></i></a> -->
                                </td>
                            </tr>
                            
                            </tbody>
                        </table>
                        <table>
	                        <tr>
			                    <td style=" padding: 20px"><a  onclick="returnHref(1)">首页</a></td>
			                    
			                    <td style=" padding: 20px">
			                    <a th:if="${page lt 1 || page == 1}" onclick="returnHref(1)">上一页</a>
			                    <a th:if="${page gt 1}" th:onclick="'returnHref('+${page-1}+')'">上一页</a>
			                    </td>
			                    <td style=" padding: 20px">
			                    <a  th:if="${page gt total || page==total}" th:onclick="'returnHref('+${total}+')'">下一页</a>
			                    <a  th:if="${page lt total}" th:onclick="'returnHref('+${page+1}+')'">下一页</a>
			                    </td>
			                    <td style=" padding: 20px"><a  th:onclick="'returnHref('+${total}+')'">最后一页</a></td>
<!-- 			                    <td style=" padding: 20px"><a  id="aidsOf1" th:href="@{'usertable?page=1&name='+${name}}" >首页</a></td>
			                    <td style=" padding: 20px"><a id="aidsOf2" th:href="@{${page}<=1 ? @{'usertable?page=1&name='+${name}}: @{'usertable?page='+(${page}-1)+'&name='+${name}}}">上一页</a></td>
			                    <td style=" padding: 20px"><a  id="aidsOf3" th:href="@{${page}>=${total} ? @{'usertable?page='+${total}+'&name='+${name}} : @{'usertable?page='+(${page}+1)+'&name='+${name}}}">下一页</a></td>
			                    <td style=" padding: 20px"><a  id="aidsOf4" th:href="@{'usertable?page='+${total}+'&name='+${name}}" >最后一页</a></td> -->
			                    <th th:text="'总共'+${total}+'页'"></th>
			                </tr>
                        </table>
                    </div>
                </div>
                <!-- END Datatables Block -->
            </div>
            <!-- END Page Content -->
        </div>
        <!--主要内容 END-->
        <!-- END Main Container -->
    </div>
    <!-- END Page Container -->
</div>
<!-- END Page Wrapper -->

<div class="modal fade" id="frmMsg" tabindex="-1" role="dialog" aria-labelledby="frmMsgLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form role="form" class="form-horizontal" id="userInfoDeleteFrom" onsubmit="return false;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="frmMsgLabel">提示</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="col-sm-3">
                            <a href="#">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </div>
                        <div class="col-sm-9">
                            <p class="form-control-static">您确定要删除吗？</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                <input type="hidden" value="" id="deleteuserid" name="deleteuserid">
                    <button type="button" class="btn btn-primary"  onclick="form_submit_onclick('userInfoDeleteFrom','deleteUserInfo')">删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="frmEdit" tabindex="-1" role="dialog" aria-labelledby="frmEditLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="userCreatOrUpdateFrom" role="form" class="form-horizontal" onsubmit="return false;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="frmEditLabel">用户信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="user_username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"  value="">
                            <input type="hidden" id="userid"  name="userid" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="user_password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="password" name="password"  placeholder="请输入密码" value="">
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" onclick="form_submit_onclick('userCreatOrUpdateFrom','creatOrUpdateUser')">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<footer th:include="basepage/footer::footer"></footer>
	<script type="text/javascript">
	$("#user_left").addClass("open");
	$("#console_left").removeClass("open");
	$("#user_admin").addClass("active");
	$("#user_table").addClass("active");
	
	var editUserInfo = function(username,password,userid){
		$("#username").val(username);
		$("#password").val(password);
		$("#userid").val(userid);
	}
	var deleteUser=function(userid){
		$("#deleteuserid").val(userid);
	}
	
	var serachUsers=function(){
		var name=$("#user_search").val();
		window.location.href="usertable?name="+name;
	}
	var returnHref = function(page){
		var name=$("#user_search").val();
		window.location.href="usertable?page="+parseInt(page)+"&name="+name;
	}
	</script>
	
</body>
</html>
